import { defineComponent, ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus";

import { instance } from "@/api/service-event"
import Header from "@/components/Header.vue"
import FilterBar from "@/components/FilterBar.vue"
import BpmnView from "@/components/BpmnView"

export default defineComponent({
  name: 'MeansServiceEventHistoryInstance',
  setup () {
    const route = useRoute()
    const router = useRouter()

    const data = ref()
    const xml = ref()

    const init = async () => {
      const res = await instance(route.params.id)
      if (res.status === 200) {
        data.value = res.data
        xml.value = res.data.xml
      } else {
        ElMessage.warning(res.message);
      }
    }

    onMounted(() => {
      init()
    })

    return () => (
      <div class="container">
        <Header onRefresh={() => { }} />
        <div class="page-main">
          <div class="page-main-query" style={{ marginBottom: '10px' }}>
            <FilterBar
              showBack={true}
              onRoute={() => router.back()}
            />
          </div>

          <BpmnView xml={xml.value} />
        </div>
      </div>
    )
  }
})